<!DOCTYPE html>
<html lang="en">
<script src="./js/jquery-3.5.1.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
<form action="/login" method="post">
    <table>
        <tr>
            <td>我的用户名：</td>
            <td>
                <input name="username" id="uname">
            </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td>
                <input name="password" type="password" id="pword">
            </td>
        </tr>
        <tr>
            <td>
                输入验证码:
            </td>
            <td>
                <input id ="capcode">
            </td>
            <td>
                <img src="/cap" id="captcha">
            </td>
        </tr>
        <tr>
            <td>
                <input onclick="login()" type="button" value="提交登录">
            </td>
        </tr>
    </table>
</form>
<script>
    let captcha = document.getElementById("captcha");
    window.onload=function (ev) {
        captcha.onclick = function () {
            alert("更新验证码")
            captcha.src="/cap"
        }
    }
    function login() {
        let username = $('#uname').val();
        let password=$('#pword').val();
        let capcode = $('#capcode').val();

        if(username===""|| password=== ""){
            alert("用户名密码不可为空")
        }else {
            $.ajax({
                url:"/login",
                method:'POST',
                data:{
                    'username':username,
                    'password':password,
                    'capcode' :capcode
                },
                success:function (json) {
                    console.log(json)
                    if(json.errorCode==200){
                        location.href="/index"
                    }else {
                        alert(json.errorMsg)
                        captcha.src="/cap"
                    }
                }
            })
        }
    }

</script>
</body>

</html>